<template>
  <div>
    <h1>个人中心</h1>
    <p>用户名: {{ user.username }}</p>
    <p>昵称: {{ user.nickname }}</p>
    <p>电话: {{ user.phone }}</p>
    <p>地址: {{ user.address }}</p>
    <el-button @click="editProfile">编辑资料</el-button>
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user';

export default {
  data() {
    return {
      user: {},
    };
  },
  methods: {
    async fetchUserProfile() {
      const response = await getUserProfile();
      this.user = response.data;
    },
    editProfile() {
      // 编辑资料逻辑
    },
  },
  mounted() {
    this.fetchUserProfile();
  },
};
</script>

<style scoped>
.user-profile {
  padding: 20px;
}
</style>